import React, { Component, PropTypes } from 'react';
import 'styles/components/template/slide-document/slide-document.scss'
import { Spin } from "antd";
import ColumnLayout from "./column-layout";
import SlideDocumentHeader from './slide-document-header'
import SlideDocumentApplicant from './slide-document-applicant'
import SlideDocumentFields from './slide-document-fields'
import EditSlideDocumentFields from './edit-slide-document-fields'
import WaterMark from 'components/water-mark';

const { ColumnLayoutLeft, ColumnLayoutRight } = ColumnLayout;

/**
 * 侧滑单据的基本样式布局，内部含有申请人和行信息内容，其余的各自开发
 * 本组件内部用context传值，需要的值有：
 * applicant、jobInfo、creditScore、info、form 五种
 * 分别为申请人、职位信息、信用积分、单据内容、表单
 */
class SlideDocument extends Component {

  render() {
    const { loading, onClickCollapse, bar, left, right, className = '', fieldsParams: { annotateService,
      annotateDisabled, ...rest }, tipsFrame } = this.props;
    return (
      <div className={`slide-document ${className}`}>
        <WaterMark/>
        {loading ? <Spin className='slide-document-spinning'/> : (
          <div className='slide-document-layout-container'>
            <SlideDocumentHeader />
            <ColumnLayout leftWidth={400} onClickCollapse={onClickCollapse}>
              <ColumnLayoutLeft>
                <EditSlideDocumentFields {...rest} />
                <SlideDocumentApplicant />
                {left}
                <SlideDocumentFields
                  annotateService={annotateService}
                  annotateDisabled={annotateDisabled}
                />
              </ColumnLayoutLeft>
              <ColumnLayoutRight>{right}</ColumnLayoutRight>
            </ColumnLayout>
            {bar}
            {tipsFrame}
          </div>
        )}
      </div>
    );
  }

  /**
   * fieldsParams: {
   *     annotateService,  可选，获取批注的接口，如果不传则不调用
   *     annotateDisabled,  是否禁用批注
   *     showEdit,  是否显示编辑行信息的按钮
   *     onClickEdit,  点击编辑行信息按钮的回调
   *     editStyle  编辑行信息的样式
   * }
   */
  static propTypes = {
    loading: PropTypes.bool,
    onClickCollapse: PropTypes.func,
    bar: PropTypes.any,
    left: PropTypes.any,
    right: PropTypes.any,
    className: PropTypes.string,
    fieldsParams: PropTypes.object  //行信息内容的配置
  }

}

export default SlideDocument;
